<template>
    <div class="container">
        <el-row>
            <el-col :span="12">
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="输入姓名查询信息" v-model="queryInfo"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="searchPatients" class="left_5">查询</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="3" class="jiandang">
                <el-button type="primary" @click="addRecord">接诊</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tableData" border style="width: 100%" header-cell-class-name="table_header"
            :header-cell-style="{
                background: '#eef1f6',
                color: '#606266',
                textAlign: 'center',
            }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <div class="operation-btns">
                        <el-button type="text" @click="editRecord(scope.row)">编辑</el-button>
                        <span class="separator">|</span>
                        <el-button type="text" @click="viewRecord(scope.row)">查看</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="就诊号" prop="hisPatientId"></el-table-column>
            <el-table-column label="姓名" prop="patientName"></el-table-column>
            <el-table-column label="性别" prop="gender">
                <template slot-scope="scope">
                    {{ scope.row.gender ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="就诊科室" prop="departmentName"></el-table-column>
            <el-table-column label="科室代码" prop="departmentCode"></el-table-column>
            <el-table-column label="就诊医生" prop="doctor"></el-table-column>
        </el-table>
        <!-- 新增/编辑窗口 -->
        <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible" width="50%" @close="clearFormValidate">
            <el-form :model="editForm" :rules="editRules" ref="editForm">
                <span class="card-border-title">基本信息</span>
                <div class="card-border">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="档案号" prop="hisPatientId">
                                <el-input v-model="editForm.hisPatientId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="姓名">
                                <template v-if="isSelectVisible">
                                    <el-select v-model="editForm.patientName" filterable remote reserve-keyword
                                        placeholder="请输入姓名查询已建档" :filter-method="queryPatientList"
                                        @change="handleChange" :loading="seloading">
                                        <el-option v-for="patient in patientList" :key="patient.patientId"
                                            :label="patient.patientName" :value="patient.patientId">
                                            <span style="float: left">{{ patient.patientName }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{
                                                patient.patientId
                                                }}</span>
                                        </el-option>
                                    </el-select>
                                </template>
                                <template v-else>
                                    <el-input v-model="editForm.patientName" placeholder="请输入姓名"></el-input>
                                </template>
                                <template v-if="!isEditMode">
                                    <el-button @click="toggleSelect">{{ buttonText }}</el-button>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="性别">
                                <el-select v-model="editForm.gender">
                                    <el-option label="男" :value="1"></el-option>
                                    <el-option label="女" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 出生日期行 -->
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="出生日期" prop="birthDay" :rules="editRules.birthDay">
                                <el-date-picker v-model="editForm.birthDay" type="date" class="datePicker"
                                    format="yyyy年MM月dd日"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="年龄" >
                                <el-input v-model="editForm.age" type="number" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="联系电话" prop="phoneNum" :rules="editRules.phoneNum">
                                <el-input v-model="editForm.phoneNum"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 残疾证号行 -->
                    <!-- <el-row>
                        <el-col :span="8">
                            <el-form-item label="残疾证号(目前没有接口)">
                                <el-input v-model="editForm.disabilityCertificateNumber"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="残疾类别">
                                <el-select v-model="editForm.disabilityType">
                                    <el-option label="类别 1" :value="type1"></el-option>
                                    <el-option label="类别 2" :value="type2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="残疾程度">
                                <el-select v-model="editForm.disabilityDegree">
                                    <el-option label="轻度" :value="mild"></el-option>
                                    <el-option label="中度" :value="moderate"></el-option>
                                    <el-option label="重度" :value="severe"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <!-- 身份证号行 -->
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证号" prop="idCard" :rules="editRules.idCard">
                                <el-input v-model="editForm.idCard"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="患者类别">
                                <el-select v-model="editForm.patientType">
                                    <el-option label="门诊" :value="1"></el-option>
                                    <el-option label="住院" :value="2"></el-option>
                                    <el-option label="其他" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="患者状态">
                                <el-select v-model="editForm.patientStates">
                                    <el-option label="在院" :value="1"></el-option>
                                    <el-option label="出院" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 联系电话行 -->
                    <el-row>

                    </el-row>
                    <!-- 联系地址行 -->
                    <el-row>
                        <!-- <el-col :span="8">
                            <el-form-item label="请选择省市区">
                                <el-select v-model="editForm.region">
                                    <el-option label="省市区 1" value="region1"></el-option>
                                    <el-option label="省市区 2" value="region2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="16">
                            <el-form-item label="详细地址" prop="addr">
                                <el-input v-model="editForm.addr"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="id" prop="patientId">
                                <el-input v-model="editForm.patientId" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <span class="card-border-title">就诊信息</span>
                <div class="card-border">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="就诊科室名称" prop="departmentName" :rules="editRules.departmentName">
                                <el-select v-model="editForm.departmentName" placeholder="请选择就诊科室"
                                    @change="updateDepartmentCode">
                                    <el-option v-for="item in departmentMapNew" :key="item.departmentName" :label="item.departmentName"
                                        :value="item.departmentCode"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="就诊科室编码">
                                <el-input v-model="editForm.departmentCode" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="医保费别">
                                <el-select v-model="editForm.insuranceType">
                                    <el-option label="自费" :value="0"></el-option>
                                    <el-option label="医保" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="就诊医生" prop="doctor" :rules="editRules.doctor">
                                <el-input v-model="editForm.doctor"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="病区">
                                <el-input v-model="editForm.sickRegion"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="床号">
                                <el-input v-model="editForm.bedNum"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 新增主诉行 -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="主诉">
                                <el-input v-model="editForm.chiefComplaint"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 新增主要诊断行 -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="主要诊断">
                                <el-input v-model="editForm.coreDiagnosis"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button v-if="isAddRecord" type="primary" @click="saveAdd('editForm')">新增接诊</el-button>
                <el-button v-if="isEditRecord" type="primary" @click="saveEdit('editForm')">更新</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </span>
        </el-dialog>

        <!-- 查看窗口 -->
        <el-dialog title="查看记录" :visible.sync="viewDialogVisible" width="50%" class="viewmoudle">
            <el-form :model="viewForm" :inline="true" label-position="right" label-width="auto">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="档案号：">
                            <span>{{ viewForm.hisPatientId }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名：">
                            <span>{{ viewForm.patientName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别：">
                            <span>{{ genderToText(viewForm.gender) }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="出生日期：">
                            <span>{{ toDate(viewForm.birthDay) }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="年龄：">
                            <span>{{ viewForm.age }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话：">
                            <span>{{ viewForm.phoneNum }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row>
                    <el-col :span="8">
                        <el-form-item label="残疾证号：">
                            <span>{{ viewForm.disabilityCertificateNumber }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="残疾类别：">
                            <span>{{ viewForm.disabilityType }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="残疾程度：">
                            <span>{{ viewForm.disabilityDegree }}</span>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="身份证号：">
                            <span>{{ viewForm.idCard }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="患者类别：">
                            <span>{{ patientTypeToText(viewForm.patientType)
                                }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="患者状态：">
                            <span>{{ patientStatesToText(viewForm.patientStates) }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="8">
                        <el-form-item label="请选择省市区">
                            <span>{{ viewForm.region }}</span>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="16">
                        <el-form-item label="详细地址：">
                            <span>{{ viewForm.addr }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="就诊科室名称：">
                            <span>{{ viewForm.departmentName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="就诊科室编码：">
                            <span>{{ viewForm.departmentCode }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="医保费别：">
                            <span>{{insuranceTypeToText(viewForm.insuranceType)}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="就诊医生：">
                            <span>{{ viewForm.doctor }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="病区：">
                            <span>{{ viewForm.sickRegion }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="床号：">
                            <span>{{ viewForm.bedNum }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="主诉：">
                            <span>{{ viewForm.chiefComplaint }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="主要诊断：">
                            <span>{{ viewForm.coreDiagnosis }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>

        <!-- 分页组件 -->
        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total"
            layout="total,sizes,prev, pager, next,jumper" @current-change="handleCurrentChange"
            @size-change="handleSizeChange"></el-pagination>
    </div>
</template>

<script>
import { queryPatientTreatmentInfo, updatePatientTreatmentInfo, addPatientTreatmentInfo, queryDepartment } from "@/api/patients/medicalinfo/info.js";
import { queryPatientInfo } from '@/api/patients/files/info.js';
import moment from "moment";
import Vue from 'vue';
export default {
    name: "Files",

    data() {
        return {
            queryInfo: "",
            tableData: [],
            tableHeaderClass: "custom-table-header",
            editDialogVisible: false, // 编辑窗口是否可见
            viewDialogVisible: false, // 查看窗口是否可见
            isAddRecord: false, //控制新增按钮显示
            isEditRecord: false,//控制更新按钮显示
            editForm: {// 编辑表单数据
                hisPatientId: '',
                patientName: '',
                gender: '',
                birthDay: '',
                age: '',
                phoneNum: '',
                disabilityCertificateNumber: '',
                disabilityType: '',
                disabilityDegree: '',
                idCard: '',
                patientType: '',
                patientStates: '',
                detailAddr: '',
                patientId: '',
                departmentName: '',
                departmentCode: '',
                insuranceType: '',
                doctor: '',
                sickRegion: '',
                bedNum: '',
                chiefComplaint: '',
                coreDiagnosis: ''
            },
            viewForm: {}, // 查看表单数据
            editRules: {
                patientName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                birthDay: [
                    { required: true, message: '请选择出生日期', trigger: 'blur' }
                ],
                idCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' }
                ],
                phoneNum: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                doctor: [
                    { required: true, message: '请输入就诊医生', trigger: 'blur' }
                ],
                departmentName: [
                    { required: true, message: '请选择就诊科室名称', trigger: 'change' }
                ]
            },
            // 分页相关属性
            currentPage: 1, // 当前页码，默认第1页
            pageSize: 10, // 每页显示的记录数，默认10条
            total: 0,// 总记录数，用于分页组件计算总页数、

            //对话标题
            dialogTitle: '', // 用于控制对话框标题的属性
            loading: false,
            // 新增：存储科室数据，格式为 {科室名称: 科室编码} 的对象
            departmentMap: {},
            departmentMapNew:[], // 新的
            patientList: [], // 存储查询到的患者信息列表

            //选择已建档相关数据
            patientList: [],
            seloading: false,
            isSelectVisible: false,
            buttonText: '选择已建档',
            isEditMode: false,//控制姓名旁button的展示
        };
    },
    mounted() {
        // 首次渲染表格，调用查询患者信息接口并传入默认页码和每页记录数
        this.firstDrow();
        // this.queryDepartmentInfo();
        this.queryDepartmentInfoNew();
        // this.startLogging();
    },

    methods: {
        // 得到性别
        genderToText(gender){
					switch(gender){
							case 0: return "女";
							case 1: return "男";
					}
        },
        // 出生日期
        toDate(val){
            return val && moment(val).format("YYYY-MM-DD");
        },
				// 患者类别转换
				patientTypeToText(patientType){
					switch(patientType){
						case 1: return "门诊";
						case 2: return "住院";
						case 3: return "其他";
					}
				},
				// 患者状态
				patientStatesToText(patientStates){
					switch(patientStates){
						case 1: return "在院";
						case 2: return "出院";
					}
				},
				// 医保费别
				insuranceTypeToText(insuranceType){
					switch(insuranceType){
						case 0: return "自费";
						case 2: return "医保";
					}
				},
        // 首次渲染
        async firstDrow() {
            this.loading = true; // 设置为加载状态
            try {
                let res = await queryPatientTreatmentInfo({
                    page: this.currentPage,
                    size: this.pageSize
                });

                // 更新总记录数，用于分页组件计算总页数
                if (res && res.code === 0 && res.content) {
                    this.total = res.totalElements;
                }
                this.processPatientData(res);
            } catch (error) {
                console.log(error);
                this.$notify({
                    title: '提示',
                    message: '网络出错了，请稍后再试',
                    type: 'danger'
                });
            } finally {
                setTimeout(() => {
                    this.loading = false;
                }, 300)
            }
        },


        // 处理获取到的数据并填充到tableData数组
        processPatientData(data) {
            if (data && data.code === 0 && data.content) {
                this.tableData = data.content.map((patient) => ({
                    ...patient,
                }));
            }
            console.log(this.tableData, "处理获取到的数据并填充到tableData数组");
        },

        //获取表格数据
        async queryPatientTreatmentInfocure() {
            try {
                let res = await queryPatientTreatmentInfo({
                    page: this.currentPage,
                    size: this.pageSize
                });
                console.log(res, 'queryPatientTreatmentInfocure');
                // 处理获取到的数据并填充到tableData数组
                this.processPatientData(res);
            } catch (error) {
                console.log(error);
                this.$notify({
                    title: '提示',
                    message: '网络出错了，请稍后再试',
                    type: 'danger'
                });
            }
        },

        //获取档案信息-在编辑的输入框输入姓名后查询返回成下拉框
        async queryAllPatientInfo(query, page = 1, size = 10) {
            try {
                let res = await queryPatientInfo({
                    page,
                    size,
                    patientName: query
                });
                return res;
            } catch (error) {
                console.log(error);
                this.$notify({
                    title: '提示',
                    message: '网络出错了，请稍后再试',
                    type: 'danger'
                });
            }
        },
        async queryPatientList(query) {
            if (query) {
                this.seloading = true;
                try {
                    let res = await this.queryAllPatientInfo(query);
                    if (res && res.code === 0 && res.content) {
                        this.patientList = res.content;
                        console.log(this.patientList, "this.patientList");
                    } else {
                        this.patientList = [];
                    }
                } catch (error) {
                    console.log(error);
                } finally {
                    this.seloading = false;
                }
            }
        },
        handleChange(value) {
            console.log("handleChange", value);
            const targetPatient = this.patientList.find(patient => patient.patientId === value);
            if (targetPatient) {
                // 先清空editForm的所有属性
                Object.keys(this.editForm).forEach(key => {
                    Vue.set(this.editForm, key, '');
                });
                Object.keys(targetPatient).forEach(key => {
                    Vue.set(this.editForm, key, targetPatient[key]);
                });
            }
            // 未找到匹配对象时，不进行任何重置操作
        },
        toggleSelect() {
            this.isSelectVisible = !this.isSelectVisible;
            if (this.isSelectVisible) {
                this.buttonText = '新建接诊';
                this.isAddRecord = false;
                this.isEditRecord = true;
            } else {
                this.buttonText = '选择已建档';
                Object.keys(this.editForm).forEach(key => {
                    Vue.set(this.editForm, key, '');
                });
                this.isAddRecord = true;
                this.isEditRecord = false;
            }
        },

        //获取科室下拉框
        // async queryDepartmentInfo() {
        //     try {
        //         let res = await queryDepartment();
        //         console.log(res, '获取科室下拉框');
        //         if (res && res.code === 0 && res.content) {
        //             this.departmentMap = {};
        //             res.content.forEach(item => {
        //                 this.departmentMap[item.departmentName] = item.departmentCode;
        //             });
        //         }
        //     } catch (error) {
        //         this.$notify({
        //             title: '提示',
        //             message: '网络出错了，请稍后再试',
        //             type: 'danger'
        //         });
        //     }
        // },
        
        async queryDepartmentInfoNew() {
            try {
                let res = await queryDepartment();
                console.log(res, '获取科室下拉框');
                if (res && res.code === 0 && res.content) {
                    this.departmentMapNew = res.content;
                    // res.content.forEach(item => {
                    //     this.departmentMap[item.departmentName] = item.departmentCode;
                    // });
                }
            } catch (error) {
                this.$notify({
                    title: '提示',
                    message: '网络出错了，请稍后再试',
                    type: 'danger'
                });
            }
        },
        // 根据选择的科室名称更新科室编码的方法
        updateDepartmentCode() {
            let data = this.departmentMapNew.find(item => item.departmentCode == this.editForm.departmentName);
            this.editForm.departmentCode = data.hisDepartmentId;
            // console.log(this.editForm,"this.editForm");
            // this.editForm.departmentCode = this.departmentMap[this.editForm.departmentName];
        },

        //点击查询
        async searchPatients() {
            this.loading = true;
            const queryParams = {
                hisPatientId: '',
                patientName: this.queryInfo, // 使用queryInfo作为患者姓名进行筛选查询
                phoneNum: '',
                idCard: '',
                bedNum: '',
                outpatientNum: '',
                admissionNum: '',
                doctor: '',
                patientType: '',
                patientStates: '',
                page: this.currentPage,
                size: this.pageSize
            };
            // patientType
            try {
                let res = await queryPatientTreatmentInfo(queryParams);
                // 更新总记录数
                if (res && res.code === 0 && res.content) {
                    this.total = res.totalElements;
                }
                this.processPatientData(res);
                if (res.totalElements === 0) {
                    // 拿到数据后toast查询成功
                    this.$notify({
                        title: '提示',
                        message: '未查询到',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: '查询成功',
                        type: 'success'
                    });
                }
            } catch (error) {
                this.$notify({
                    title: '提示',
                    message: '网络出错了，请稍后再试',
                    type: 'danger'
                });
            } finally {
                setTimeout(() => {
                    this.loading = false;
                }, 300)
            }
        },

        // 处理每页显示条数变化的逻辑
        async handleSizeChange(value) {
            this.pageSize = value;
            let res = await queryPatientTreatmentInfo({
                page: this.currentPage,
                size: this.pageSize
            })
            this.processPatientData(res);
        },

        // 页码变化
        async handleCurrentChange(newPage) {
            this.currentPage = newPage;
            let res = await queryPatientTreatmentInfo({
                page: this.currentPage,
                size: this.pageSize
            })
            this.processPatientData(res)
        },

        // 重置编辑表单
        resetForm() {
            this.editForm = {};
            // 获取表单实例并调用resetFields方法重置校验状态
            if (this.$refs.editForm) {
                this.$refs.editForm.resetFields();
            }
        },

        // （点击接诊）添加记录
        addRecord() {
            this.dialogTitle = '新增就诊记录';
            this.editDialogVisible = true;
            this.resetForm();
            // 设置为新增记录状态，显示新增按钮
            this.isAddRecord = true;
            if(this.isSelectVisible){
                this.toggleSelect()
            }
            this.isEditRecord = false;
            this.isEditMode = false;
        },

        // （点击编辑）编辑记录
        editRecord(row) {
            this.dialogTitle = '编辑就诊记录';
            this.editDialogVisible = true;
            // 将当前行数据赋值给编辑表单数据
            this.editForm = { ...row };
            let data = this.departmentMapNew.find(item => item.hisDepartmentId == row.departmentCode);
            this.editForm.departmentName = data.departmentCode;
            // 设置为编辑记录状态，显示更新按钮
            this.isSelectVisible = true;
            this.isAddRecord = false;
            this.isEditRecord = true;
            this.isEditMode = true;
        },

        // 查看记录：
        viewRecord(row) {
            console.log("查看记录：", row);
            this.viewDialogVisible = true;
            // 将当前行数据赋值给查看表单数据
            this.viewForm = row;
        },

        // 点击更新 编辑记录保存方法
        saveEdit(editForm) {
            // 进行表单验证
            this.$refs[editForm].validate((valid) => {
                if (valid) {
                    const newForm = { ...this.editForm };
                    console.log('newForm', newForm);
                    updatePatientTreatmentInfo(newForm)
                        .then(response => {
                            // 根据接口返回处理成功情况，比如提示用户更新成功等
                            console.log("记录更新成功：", response);
                            this.$notify({
                                title: '提示',
                                message: '记录更新成功',
                                type: 'success'
                            });
                            // 关闭弹窗
                            this.editDialogVisible = false;
                            // 重新获取数据刷新表格
                            this.firstDrow();
                        })
                        .catch(error => {
                            this.$notify({
                                title: '提示',
                                message: '记录更新失败',
                                type: 'danger'
                            });
                        });
                } else {
                    // 验证不通过，不调用接口，弹窗不隐藏
                    return false;
                }
            });
        },

        // 新增接诊 记录保存方法
        saveAdd(editForm) {
            // 进行表单验证
            this.$refs[editForm].validate((valid) => {
                if (valid) {
                    console.log('提交信息：', this.editForm);
                    // this.editDialogVisible = false;
                    addPatientTreatmentInfo(this.editForm)
                        .then(response => {
                            // 根据接口返回处理成功情况，比如提示用户新增成功等
                            console.log("记录新增成功：", response);
                            this.$notify({
                                title: '提示',
                                message: '记录保存成功',
                                type: 'success'
                            });
                            // 关闭弹窗
                            this.editDialogVisible = false;
                            // 重新获取数据刷新表格
                            this.firstDrow();
                        })
                        .catch(error => {
                            // 处理新增失败的情况，比如提示用户新增失败及错误信息等
                            console.error("记录新增失败：", error);
                        });
                } else {
                    // 验证不通过，不调用接口，弹窗不隐藏，这里已经会自动显示红色提示消息（由表单验证规则控制）
                    return false;
                }
            });
        },

        //关闭dialog时调用的方法
        clearFormValidate() {
            if (this.$refs.editForm) {
                this.$refs.editForm.clearValidate();
            }
            if (this.$refs.viewForm) {
                this.$refs.viewForm.clearValidate();
            }
        },

        startLogging() {
            this.timer = setInterval(() => {
                console.log(this.editForm);
            }, 5000);
        },

    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
    padding: 10px;

    .el-row {
        margin-bottom: 5px;

        .el-form-item {
            margin: 0 15px;
        }
    }

    .el-pagination {
        text-align: center;
        margin-top: 8px;
    }

    /deep/ .table_header {
        // background-color: #eef1f6;
        text-align: center;
        // color: white;    
        background-color: rgb(238, 241, 246);
        color: rgb(96, 98, 102);
    }

    .operation-btns {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .left_5 {
        margin-left: 5px;
    }

    .separator {
        color: #1890ff;
        margin: 0 1px;
    }

    /* 编辑和查看窗口样式 */
    .el-select {
        width: 100%;
    }

    .datePicker {
        width: 100%;

    }

    /deep/.el-dialog {
        border-radius: 5px;
    }

    /deep/.el-dialog__header {
        background-color: #f0f0f0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    /deep/.el-dialog__footer {
        text-align: right;
    }

    /deep/.dialog-footer {
        margin-top: 10px;
    }

    /deep/.el-dialog__body {
        padding: 10px 20px;
    }

    .viewmoudle {
        .el-form-item {
            white-space: nowrap;
            display: flex;
        }
    }

    .card-border-title {
        position: relative;
        top: 10px;
        left: 15px;
        padding: 5px;
        background-color: #fff;
    }

    .card-border {
        border: 1px solid #1890ff;
        border-radius: 5px;
        padding: 10px;
    }
}

.jiandang {
    float: right;
}
</style>